import React, { useState } from 'react';
import './Tabs.scss'
import { FireFilled, RightSquareFilled } from '@ant-design/icons';
function Tabs() {
  const list = [
    { title: '海报' },
    { title: '小红书' },
    { title: '公众号' },
    { title: 'PPT' },
    { title: '电商' },
    { title: '印刷无聊' },
    { title: 'H5' },
    { title: '认识行政' },
    { title: '社交生活' },
    { title: '视频模版' },
    { title: '字体库' },
    { title: '插画元素' },
    { title: '图片库' },
    { title: '企业设计' },
    { title: '视频特效' },
  ]
  return (
    <div className="Tabs">
      <div className='content'>
        <div className='TabsChildren1'>
          {
            list.map((item, index) => (
              <b key={index} > {item.title}</b>
            ))
          }
   
          <div style={{ margin: "30px 10px", display: "flex" }}>
            <div>
              <h2 style={{ marginLeft: "10px" }}>精选内容</h2>
              <div className='TabsLeft'>
                <div className='TabsLeftChildren'>
                  <div>
                    <h4 style={{ margin: "10px" }}>中秋放假通知</h4>
                    <p><FireFilled style={{ color: "#fcd53f" }} />爆款中秋放假通知大合集</p>
                    <p style={{ marginTop: "20px" }}><RightSquareFilled style={{ fontSize: "24px" }} /></p>
                  </div>
                  <img src="https://pub-cdn-oss.chuangkit.com/ad_position/eb47ef0db05847c2870b375634f6f4f6" alt="" style={{ width: "120px", height: "120px" }} />
                </div>
                <div className='TabsLeftChildren'>
                  <div>
                    <h4 style={{ margin: "10px" }}>金九银十招聘季</h4>
                    <p><FireFilled style={{ color: "#fcd53f" }} />海量物料助力寻才</p>
                    <p style={{ marginTop: "20px" }}><RightSquareFilled style={{ fontSize: "24px" }} /></p>
                  </div>
                  <img src="https://pub-cdn-oss.chuangkit.com/ad_position/971bf1c7df4641199345131093a287ae" alt="" style={{ width: "120px", height: "120px" }} />
                </div>
                <div className='TabsLeftChildren'>
                  <div>
                    <h4 style={{ margin: "10px" }}>每日模版上新速递</h4>
                    <p><FireFilled style={{ color: "#fcd53f" }} />抢先体验最新原创模版</p>
                    <p style={{ marginTop: "20px" }}><RightSquareFilled style={{ fontSize: "24px" }} /></p>
                  </div>
                  <img src="https://pub-cdn-oss.chuangkit.com/ad_position/ae5c513359ff45519ec8ee48bfef6910" alt="" style={{ width: "120px", height: "120px" }} />
                </div>
              </div>
            </div>

            <div>
              <h2 style={{ marginLeft: "20px" }}>常用场景</h2>
              <div className='TabsRight'>
                <div className='TabsRightChildren'>
                  <h4>手机海报</h4>
                  <img src="https://pub-cdn-oss.chuangkit.com/designKind/447" alt="" style={{ width: "75px", height: '100px' }} />
                </div>
                <div className='TabsRightChildren'>
                  <h4>手机海报</h4>
                  <img src="	https://pub-cdn-oss.chuangkit.com/designKind/2" alt="" style={{ width: "75px", height: '100px' }} />
                </div>
                <div className='TabsRightChildren'>
                  <h4>手机海报</h4>
                  <img src="	https://pub-cdn-oss.chuangkit.com/designKind/170" alt="" style={{ width: "75px", height: '100px' }} />
                </div>
                <div className='TabsRightChildren'>
                  <h4>手机海报</h4>
                  <img src="	https://pub-cdn-oss.chuangkit.com/designKind/216" alt="" style={{ width: "120px", height: '60px' }} />
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  )
}

export default Tabs
